<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>申请结算</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">申请结算</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-form-item">
                    <blockquote class="layui-elem-quote" id="amountTip"></blockquote>
                </div>
                <form class="layui-form center" id="applyForm" style="display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户属性</label>
                        <div class="layui-input-block">
                            <input type="radio" name="accountAttr" value="0" title="对私" checked>
                            <input type="radio" name="accountAttr" value="1" title="对公">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户类型</label>
                        <div class="layui-input-block">
                            <input type="text" id="accountType" lay-verify="required" autocomplete="off" class="layui-input" style="border:none">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">银行名称</label>
                        <div class="layui-input-block">
<!--                            <input type="text" id="bankName" name="bankName" placeholder="请输入银行名称" lay-verify="required" autocomplete="off" class="layui-input">-->
                            <select name="bankName" id="bankName" lay-filter="mySelect" placeholder="请输入银行名称">
                                <option value="中国工商银行">工商银行</option>
                                <option value="中国农业银行">农业银行</option>
                                <option value="中国银行">中国银行</option>
                                <option value="中国建设银行">中国建设银行</option>
                                <option value="交通银行">交通银行</option>
                                <option value="中信银行">中信银行</option>
                                <option value="中国光大银行">光大银行</option>
                                <option value="华夏银行">华夏银行</option>
                                <option value="中国民生银行">中国民生银行</option>
                                <option value="广发银行股份有限公司">广发银行</option>
                                <option value="浦发银行">浦发银行</option>
                                <option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
                                <option value="平安银行（原深圳发展银行）">平安银行</option>
                                <option value="招商银行">招商银行</option>
                                <option value="兴业银行">兴业银行</option>
                                <option value="上海农商银行">上海农商银行</option>
                                <option value="徽商银行">徽商银行</option>
                                <option value="深圳前海微众银行">深圳前海微众银行</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">开户省市</label>
                        <div class="layui-input-block">
                            <input type="text" id="cityPicker" style="width: 68%" placeholder="请选择开户行省市" class="layui-input" data-toggle="city-picker">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">开户网点</label>
                        <div class="layui-input-block">
                            <input type="text" id="bankNetName" name="bankNetName" placeholder="请输入完整开户网点地址" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="accountName" name="accountName" placeholder="请输入账户名称" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">银行卡号</label>
                        <div class="layui-input-block">
                            <input type="text" id="accountNo" name="accountNo" placeholder="请输入银行卡号" lay-verify="required|number" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">结算金额(元)</label>
                        <div class="layui-input-block">
                            <input type="text" required  name="settAmount" placeholder="请输入结算金额" lay-verify="required|number" placeholder="请输入结算金额" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <input type="hidden" name="feeType" id="feeType">
                    <input type="hidden" name="feeRate" id="feeRate">
                    <input type="hidden" name="feeLevel" id="feeLevel">
                    <div class="layui-form-item" id="payAuthDiv" style="display: none">
                        <label class="layui-form-label">支付密码</label>
                        <div class="layui-input-block">
                            <input type="password" required id="payPassword" name="payPassword"  placeholder="请输入支付密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" id="googleAuthDiv" style="display: none">
                        <label class="layui-form-label">谷歌验证码</label>
                        <div class="layui-input-block">
                            <input type="text" required id="googleCode" name="googleCode"  placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <div class="layui-input-block">
                            <button type="button" lay-submit lay-filter="btnJSJ" class="layui-btn">提交申请</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'util', 'admin', 'citypicker'], function () {
        var form = layui.form
            , $ = layui.$
            , admin = layui.admin
            , citypicker = layui.citypicker
            , element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息
        // var paySecurityType;

        var currentPicker = new citypicker("#cityPicker", {
            provincename: "provinceId",
            cityname: "cityId",
            districtname: "districtId",
            level: 'cityId',// 级别
        });
        // currentPicker.setValue("河南省/信阳市/新县");
        admin.req({
            type: 'get',
            url: layui.setter.baseUrl + '/sett/is_allow_apply',
            error: function (err) {
                layer.alert(err.msg, {title: '请求失败'})
            },
            success: function (res) {
                if (res.code == 0) {
                    if (res.msg.length > 0) {
                        $('#amountTip').html("<span style='color: red'>" + res.msg + "</span>");
                    } else {
                        $("#applyForm").show();
                        admin.req({
                            type: 'get',
                            url: layui.setter.baseUrl + '/account/get',
                            error: function (err) {
                                layer.alert(err.msg, {title: '请求失败'})
                            },
                            success: function (res) {
                                if (res.code == 0 && res.data != null) {
                                    $('#amountTip').html("可申请结算金额: <span style='color: red'>" + res.data.availableSettAmount / 100 + "</span> 元");
                                }
                            }
                        });

                        admin.req({
                            type: 'get',
                            url: layui.setter.baseUrl + '/mch/get',
                            error: function (err) {
                                layer.alert(err.msg, {title: '请求失败'})
                            },
                            success: function (res) {
                                if (res.code == 0 && res.data != null) {
                                    $("input[name='accountAttr'][value='" + res.data.accountAttr + "']").attr("checked", true);
                                    $('#accountType').val(res.data.accountType == 1 ? "银行账户" : res.data.accountType == 2 ? "微信账户" : res.data.accountType == 3 ? "支付宝账户" : "");
                                    // $('#bankName').val(res.data.bankName);
                                    // $('#bankNetName').val(res.data.bankNetName);
                                    // $('#accountName').val(res.data.accountName);
                                    // $('#accountNo').val(res.data.accountNo);
                                    $('#feeType').val(res.data.feeType);
                                    $('#feeRate').val(res.data.feeRate);
                                    $('#feeLevel').val(res.data.feeLevel);
                                    paySecurityType = res.data.paySecurityType;
                                    if (paySecurityType == 0) {
                                    } else if (paySecurityType == 1) {
                                        $("#payAuthDiv").show();
                                    } else if (paySecurityType == 2) {
                                        $("#googleAuthDiv").show();
                                    } else if (paySecurityType == 3) {
                                        $("#payAuthDiv").show();
                                        $("#googleAuthDiv").show();
                                    }
                                }
                            }
                        });
                    }
                }
            }
        });

        form.on('submit(btnJSJ)', function (data) {
            // 校验
            var provinceCity = $("#cityPicker").val();
            if (provinceCity && provinceCity != '') {
                var strings = provinceCity.split("/");
                var province = strings[0];
                var city = strings[1];
            }
            var payPassword = $("#payPassword").val();
            var googleCode = $("#googleCode").val();
            if (paySecurityType == 0) {
            } else if (paySecurityType == 1) {
                if (payPassword == '') {
                    layer.alert("请填写支付密码!", function (index) {
                        layer.close(index);
                    });
                    return false;
                }
            } else if (paySecurityType == 2) {
                if (googleCode == '') {
                    layer.alert("请填写谷歌验证码!", function (index) {
                        layer.close(index);
                    });
                    return false;
                }
            } else if (paySecurityType == 3) {
                if (payPassword == '') {
                    layer.alert("请填写支付密码!", function (index) {
                        layer.close(index);
                    });
                    return false;
                }
                if (googleCode == '') {
                    layer.alert("请填写谷歌验证码!", function (index) {
                        layer.close(index);
                    });
                    return false;
                }
            }
            var settAmount = data.field.settAmount;
            var feeType = $('#feeType').val();
            var feeRate = $('#feeRate').val();
            var feeLevel = $('#feeLevel').val();
            var fee = 0;
            if (feeType == 1) {   // 百分比收费
                fee = settAmount * (feeRate / 100);
            } else if (feeType == 2) { // 固定每笔收费
                fee = feeLevel / 100;
            }
            var conMsg = "申请结算金额:" + settAmount + "元,手续费:" + fee + "元,确定申请么?";
            layer.confirm(conMsg, function (index) {
                admin.req({
                    type: 'post',
                    url: layui.setter.baseUrl + '/sett/apply',
                    data: {
                        settAmount: data.field.settAmount,
                        payPassword: data.field.payPassword,
                        googleCode: data.field.googleCode,
                        province: province,
                        city: city,
                        bankName: data.field.bankName,
                        bankNetName: data.field.bankNetName,
                        accountName: data.field.accountName,
                        accountNo: data.field.accountNo
                    },
                    success: function (res) {
                        layer.close(index);
                        if (res.code == 0) {
                            layer.alert(res.msg, function (index) {
                                location.hash = '/sett/list';
                            })
                        }
                    }
                });
            });
            return false;
        });
        form.render();

    })
</script>